<template>
  <view class="flex-col page">
	  
	<uni-nav-bar color="#000" title="" />
	
    <view class="flex-col flex-auto group">
	  <!-- <view v-if="resultArray.length!=0" class="grid"  @click="onclick()"> -->
			<uni-grid :column="2" :highlight="true" @change="link" :square="false" :showBorder="false">
				<uni-grid-item v-for="(item, index) in resultArray" :index="index" :key="index" >
					<!-- 在这个地方下面添加点击设备方法 -->
					<view class="grid-item-box" style="background-color: #fff;" @click="navTo('/pages/product/product')">
						<view class="flex-col group_7 space-y-15">
							<view class="flex-col self-start section_3 space-y-14">
							  <view class="flex-col items-start">
								<image class="image_13" src="../../static/images/51276e00a4890f11936fcc00b81e6367.png" />
								<text class="font_1">{{ item.name_commodity }}</text>
							  </view>							  
							  <view class="flex-row items-center space-x-4">
								<text class="font_4">{{ item.description_commodity }}</text>
								<!-- <view class="section_2"></view> -->
								
							  </view>
							  <text class="font_4 text_12">￥{{ item.money_commodity }}</text>
							</view>
						</view>
					</view>	
				</uni-grid-item>
			</uni-grid>
	 <!-- </view> -->
   </view>
  </view>
</template>

<script>
	import {
		_nameshopequip
	} from '@/service/shop.js'
	export default {
		data() {
			return {
				valueKeyWord: undefined, //先这样储存一下，说不定有用
				resultArray: null
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: "请稍后"
			});
			//显示加载叠层
			this.valueKeyword = options.keyword;
			if (this.valueKeyword != undefined) {
				let self = this;
				this.getResult(this.valueKeyword).
				then(function(data) {
					//异步操作，成功返回将执行下列操作
					self.resultArray = data; //保存返回值，然后页面就更新啦
					uni.hideLoading();//显示加载叠层
				}).
				catch(function(data) {
					console.log(data); //失败则输出
					uni.hideLoading();//显示加载叠层
				})
			}
		},
		onShow() {

		},
		methods: {
			async getResult(value) {
				let data = {
					name_commodity: value
				}
				let resultData;
				try {
					resultData = await _nameshopequip(data);
				} catch (error) {
					//console.log(error + " 接口调用异常");
					throw error; //抛出异常
				}
				if (resultData == undefined || resultData != undefined && resultData.message != "查询成功") {
					throw new Error("接口返回异常，位置list.vue");
				}
				//;
				return resultData.data;
			},
			init() {

			},
			navTo(url) {
				uni.navigateTo({
					url: url,
					success(res) {
						console.log('成功啦', res);
					},
					fail(err) {
						console.log('失败啦', err);
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.checkPage{
			// width: 100%;
			// overflow: hidden;
			bottom: 0;
			position: absolute;
		}
		
		.typelist {
		  position: fixed;
		  bottom: 0;
		}
		.date{
			background: #ffffff;
			padding: 10upx;
			margin-bottom: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;
			// height: 240upx;
		}
		.tabWrap {
			display: flex;
			height: 80upx;
			width: 100%;
		}
	.eachTab{
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			width: 145upx;
			height: 50upx;
			border-radius: 40upx;
			background: #ffffff;
			margin: 10upx 20upx;
		}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 6rpx;
	}
	
	.grid{
		margin-top: 25rpx;
	}

  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    }
  .group_7 {
	margin-top: 40rpx;
	padding-left: 23.5rpx;
	padding-right: 25rpx;
        
	.section_3 {
	  padding: 4.17rpx 25rpx 16.67rpx;
	  background-color: #ffffff;
	  border-radius: 20.83rpx;
	  box-shadow: 0px 1.17rpx 3.33rpx #00000040;
	  width: 333.33rpx;
	  border: solid 0.08rpx #b4cccb80;
	  .image_13 {
		width: 75rpx;
		height: 89.58rpx;
	  }
	}
	.section_3 {
	  padding: 4.17rpx 25rpx 16.67rpx;
	  background-color: #ffffff;
	  border-radius: 20.83rpx;
	  box-shadow: 0px 4.17rpx 8.33rpx #00000040;
	  width: 333.33rpx;
	  border: solid 2.08rpx #00baad80;
	  .image_13 {
	    width: 75rpx;
	    height: 89.58rpx;
	  }
	}
	
	.space-y-14 {
	  & > view:not(:first-child),
	  & > text:not(:first-child),
	  & > image:not(:first-child) {
		margin-top: 35.17rpx;
	  }
	}
	.space-x-4 {
	  & > view:not(:first-child),
	  & > text:not(:first-child),
	  & > image:not(:first-child) {
		margin-left: 8.33rpx;
	  }
	  .text_12 {
		color: #43cf7c;
		line-height: 17.71rpx;
	  }
	}
	.section_2 {
	  background-color: #a6a6a6;
	  width: 2.08rpx;
	  height: 29.17rpx;
	}
  }
  .space-y-15 {
	& > view:not(:first-child),
	& > text:not(:first-child),
	& > image:not(:first-child) {
	  margin-top: 31.25rpx;
	}
  }
  .font_4 {
	font-size: 18.75rpx;
	font-family: AlibabaPuHuiTi;
	line-height: 16.67rpx;
	color: #00000080;
  }
  .font_1 {
	margin-top: 15rpx;
	font-size: 25rpx;
	font-family: SourceHanSansCN;
	line-height: 22.92rpx;
	color: #000000;
  }
  .image_14 {
	margin-right: 54rpx;
	margin-top: 125rpx;
	border-radius: 50%;
	width: 94rpx;
	height: 94rpx;
	position: fixed;
	bottom: 140rpx;
	right: 0;
  }
  .selected-icon {
    position: absolute;
    top: 20rpx;
    right: 30rpx;
    width: 20px;
    height: 20px;
  }
  .image1{
	width: 38rpx;
	height: 38rpx;
	// margin-top: -40rpx;
	margin-left: 275rpx;
  }
  .selected-image {
    position: absolute;
    top: 20rpx;
    left: 35rpx;
  }

</style>